<template>
  <div class="all">
    <div class="all_top">
      <div class="top_one">
        <div class="top_div">
          <span style="margin-left: 1vw; font-size: 1.3vw">储备项目</span>
        </div>
      </div>
      <div class="top_two">
        <input class="top_two_inp" type="text" v-model="title"/>
        <div class="top_two_btn" @click="select"></div>
      </div>
    </div>

    <div class="all_body">
      <ul>
        <li class="body_li" v-for="(item, index) of project" :key="index">
          <span style="color: #39698e">
            {{ index + 1 }}.{{item.projectName}}</span
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { GetData } from '@/api';
import { onMounted, ref } from '@vue/runtime-core';

const project = ref([])
const title = ref('')
const getProject = async()=>{
  const res = await GetData(`/getProjectPage?pageNum=1&pageSize=10&typeId=1575022897383841793`)
  console.log(res.records);
  project.value = res.records
}
const select = async()=>{
  const res = await GetData(`/getProjectPage?pageNum=1&pageSize=10&projectName=${title.value}&typeId=1575022897383841793`)
  project.value = res.records
}
onMounted(()=>{
  getProject()
})
</script>

<style scoped>
.all {
  height: 100%;
}
.all_top {
  display: flex;
}
.top_one {
  flex: 2;
}
.top_two {
}
.top_two_inp {
  float: left;
  height: 5vh;
  width: 10vw;
  border: 1px solid #bac7d5;
  box-sizing: border-box;
}
.top_two_btn {
  background-image: url(../assets/imgs/sheach_one.png);
  background-repeat: no-repeat;
  background-size: 5vw 5vh;
  height: 5vh;
  width: 20vh;
  float: left;
}
.all_body {
  padding: 1.2vw;
}
li {
  list-style: none;
}
.body_li {
  padding: 2vh;
  line-height: 2vh;
  border-bottom: 1px dashed #39698e;
}

.top_div {
  width: 29vw;
  line-height: 5vh;
  color: #fff;
  height: 5vh;
  background-image: url(../assets/imgs/left_one.png);
  background-size: 22vw;
  background-repeat: no-repeat;
}
</style>